<template>
	<custom-layout custom-class="custom-layout">
		<!-- 背景图片 -->
		<view class="bg">
			<!-- 可提现金额 -->
			<view class="withdrawn">
				<view class="title">
					可提现金额
				</view>
				<view class="content">
					￥<text class="money">{{withdrawalMoney.toFixed(2)}}</text>
				</view>
			</view>
			<!-- 提现金额 -->
			<wd-card  custom-class="card">
				<template #title>
					<view class="top-title">
						<view class="withdrawn-money">提现金额</view>
						<view class="rule" @click="ruleShow = true">
							<image  src="/static/image/my-withdrawal/rule.png" mode="aspectFit" class="rule-img"></image>
							<text>提现规则</text>
							
						</view>
						
					</view>
				</template>
				<!-- 填写提现多少钱 -->
				<wd-input
				  v-model="inputMoney"
				  placeholder="满50.00可提现"
				  use-prefix-slot
				  @change="handleChange"
				  custom-class="input">
				  <template #prefix>
				  	  <text style="font-size: 60rpx;color: #333333;">￥</text>
				  </template>
				  <template #suffix>
					  <text style="color: #82aae6;" @click="allWithDrawal">全部提现</text>
				  </template>
				</wd-input>
				<!-- 提现至 -->
				<view class="select">
					<view class="">
						提现至
					</view>
					<view class="select-content">
						<image src="/static/image/my-withdrawal/vx.png" mode="aspectFit" class="select-img"></image>
						<text>微信零钱</text>
					</view>
				</view>
				<!-- 立即提现 -->
				<wd-button block size="large" :round="false" custom-class="submit-button" @click="handleWithDrawal">立即提现</wd-button>
			</wd-card>
			<wd-popup v-model="ruleShow" custom-style="border-radius:32rpx;padding:20rpx;width:70vw;">
			  <view class="custom-txt">
				  <view class="popup-title">
				  	1. 新用户提现规则
				  </view>
				      ○ 新用户首次提现需满足账户余额达到100元。其中，用户自身积累的金额需达到50元，剩余部分可通过参与平台活动获得的其他奖励来补足。例如，用户自身赚取了50，通过线索有效、成功量房等任务获得额外奖励50元，即可满足100元的提现条件。
				  <view class="popup-title">
				  	2. 其他奖励提现规则
				  </view>
				      ○ 用户通过平台活动（线索有效、成功量房等）获得的奖励金额无门槛，可直接计入账户余额，用于凑齐100元提现条件或直接提现（若余额已满足提现要求）。
				  <view class="popup-title">
				  	3. 提现方式
				  </view>
				      ○ 提现将通过微信支付渠道进行，用户需绑定微信支付账户，确保账户信息准确无误，以便顺利收款。
				  <view class="popup-title">
				  	4. 提现周期
				  </view>
				      ○ 提现申请提交后，一般在3个工作日内完成审核与转账操作。如遇节假日或特殊情况，可能会有所延迟，具体以实际到账时间为准。
				  <view class="popup-title">
				  	5. 注意事项
				  </view>
				      ○ 请用户遵守平台规则，诚信参与活动。如发现作弊，行为平台有权取消提现资格并冻结账户。
				      ○ 本提现规则自发布之日起生效，平台有权根据实际情况对规则进行调整，调整后的规则将提前公示。
			  </view>
			</wd-popup>
		</view>
	</custom-layout>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		initiateWithdraw
	} from '@/api/withdrawal/index.js'
	import {
		useDictionaryStore,
		useUserStore
	} from '@/store/index.js'
	import dayjs from 'dayjs'

	// 字典仓库
	const dictionaryStore = useDictionaryStore()
	// 用户仓库
	const userStore = useUserStore()
	// 可提现金额
	const withdrawalMoney = ref()
	withdrawalMoney.value = userStore.userInfo?.commissionUserRespVO?.notWithdrawnMoeny || 0
	
	// 输入金额
	const inputMoney = ref()
	
	const handleChange = () => {
		
	}
	// 点击查看规则
	const ruleShow = ref(false)
	// 全部提现
	const allWithDrawal = () => {
		inputMoney.value = withdrawalMoney.value
	}
	// 立即提现
	const handleWithDrawal = () => {
		// if(inputMoney.value<50) {
		// 	uni.showToast({
		// 		title:'提现金额需满50元',
		// 		icon: 'error'
				
		// 	})
		// 	return
		// }
		// if(inputMoney.value>withdrawalMoney.value) {
		// 	uni.showToast({
		// 		title:'提现金额大于可提现金额',
		// 		icon: 'error'
		// 	})
		// 	return
		// }
		const params = {
			wxUserId: userStore.userId,
			money:inputMoney.value,
			withdrawalType:'1'
			
		}
		initiateWithdraw(params).then(res=>{
			console.log(res,'res');
			const templateId = 'iyebQOQJfMDB1NrnYgb9YmnYTThOOEscqqIBISSdzDw'
			wx.requestSubscribeMessage({
				tmplIds: [templateId],
				success(res) {
					if (res[templateId] === 'accept') {
					// 用户同意订阅
					console.log('用户同意订阅');
					uni.showToast({
						title:'用户同意订阅',
						icon:'success'
					})
					
					} else {
					// 用户拒绝订阅
					console.log('用户拒绝订阅');
					uni.showToast({
						title:'用户拒绝订阅',
						icon:'error'
					})
					}
				},
				fail(err) {
					console.error('请求订阅失败', err);
					uni.showToast({
						title:'请求订阅失败',
						icon:'error'
					})
				},
				 complete() {
				// 无论订阅成功或失败，都执行以下操作
					uni.navigateTo({
						url: `/pages/withdrawal/detail/index?inputMoney=${inputMoney.value}`
					})
				}
				});
			
		}).catch((error) => {
			setTimeout(() => {
				uni.showToast({
					title: error,
					icon: 'error'
				})
			})
		})
	}

</script>

<style lang="scss" scoped>
	// 自定义布局
	:deep(.custom-layout) {
		background: #F8F8F8;
	}
	.bg {
		width: 100vw;
		height: 100vh;
		background: url('~@/static/image/my-withdrawal/bg.jpg')  no-repeat ;
		background-size: 100% auto;
		.withdrawn {
			margin: 0 20rpx;
			padding: 60rpx 20rpx 0 20rpx;
			.title {
				color: #d1e3fb;
			}
			.content {
				color: #fff;
				margin: 20rpx 0;
				.money {
					font-size: 60rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.top-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.rule {
			color: #82aae6;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			.rule-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 8rpx;
			}
		}
	}
	:deep(.input) {
		margin-top: 26rpx;
	}
	.select {
		margin-top: 20rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		color: #333333;
		.select-content {
			display: flex;
			align-items: center;
			.select-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 8rpx;
			}
		}
		
	}
	:deep(.submit-button) {
		margin-top: 70rpx;
	}
	.custom-txt {
		font-size: 24rpx;
		.popup-title {
			font-weight: bold;
		}
	}
	
</style>